import { Box, Heading, Divider, HStack, Text } from '@chakra-ui/react';
import { css } from '@emotion/react';
import { baseURL } from '../../axiosConfig';
import axios from 'axios';

const DetailContainer = css`
  padding: 10px 0;
  & > p {
    font-size: 14px;
    margin-bottom: 10px;
  }
  & > img,
  & > video {
    margin-bottom: 10px;
    display: block;
  }
`;

// 获取到用户能够访问到的所有的路由参数
export default function Detail({ detail }) {
  return (
    <Box maxW="1200px" mx="auto" mt="60px">
      <Heading as="h2" size="xl">{ detail.title }</Heading>
      <Heading as="h4" size="lg" mt="10px" fontWeight="light" color="gray.500">{ detail.sub }</Heading>
      <Divider mt="10px" />
      <HStack justify="space-between" mt="10px">
        <Text>作者：{ detail.author }</Text>
        <Text>发布时间：{ detail.publish }</Text>
      </HStack>
      <Divider mt="10px" />
      <Box css={DetailContainer} dangerouslySetInnerHTML={{ __html: detail.content }}></Box>
    </Box>
  );
}

// 根据参数获取其对应的数据
export async function getStaticPaths() {
  const { data } = await axios.get('/api/videos', { baseURL });
  const paths = data.map(id => ({ params: { id } }));
  return {
    paths,
    fallback: false
  };
}

export async function getStaticProps({ params }) {
  const { data: detail } = await axios.get(`/api/detail?id=${params.id}`, { baseURL });
  return {
    props: {
      detail
    }
  };
}